<template>
  <div class="home">
    <header>
      <van-icon name="arrow-left" />
      <span> 排行版 </span>
      <span></span>
    </header>
    <main>
      <div class="paihang">
        <img src="../assets/2.jpg" alt="" />
        <div class="touxiang">
          <dl>
            <dt>
              <van-image
                round
                width="10rem"
                height="10rem"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </dt>
            <dd>陈冬红</dd>
          </dl>
          <dl class="touxiang_top">
            <dt>
              <van-image
                round
                width="10rem"
                height="10rem"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </dt>
            <dd>李利群</dd>
          </dl>
          <dl>
            <dt>
              <van-image
                round
                width="10rem"
                height="10rem"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </dt>
            <dd>殷杭</dd>
          </dl>
        </div>
        <div class="top_bet">
          <dl v-for="(item, ind) in list" :key="ind">
            <dd>
              <span>{{ item.id }}</span>
            </dd>
            <dt><img :src="item.img" alt="" /></dt>
            <dd>
              <p>{{ item.name }}</p>
              <p>{{ item.title }}</p>
            </dd>
            <dd class="bret">
              <van-icon name="chat-o" />
              <van-icon name="phone-o" />
            </dd>
          </dl>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import axios from "axios";

export default defineComponent({
  name: "Home",
  data() {
    return {
      list: [],
    };
  },
  created() {
    axios.get("http://127.0.0.1:7001/getList").then((res) => {
      this.list = res.data.data;
      // console.log("res",res.data.data)
    });
  },
  components: {},
});
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  align-items: center;
  background: cornflowerblue;
  color: #fff;
  font-size: 16px;
}
main {
  flex: 1;
  overflow: scroll;
  .paihang {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    img {
      width: 100%;
      height: 320px;
    }
  }
}
.touxiang {
  width: 100%;
  display: flex;
  margin-top: 20px;
  justify-content: center;
  position: absolute;
  top: 150px;

  dl {
    width: 27%;
    height: 150px;
    background: pink;
    border-radius: 15px;
    margin: 0 2px;
    background: #f2f6fc;
    text-align: center;
    padding: 10px 0;
    dd {
      padding: 10px 0;
      font-weight: bolder;
    }
  }
  .touxiang_top {
    width: 33%;
    height: 180px;
    position: relative;
    top: -30px;
  }
}
.top_bet {
  width: 100%;
  display: flex;
  flex-direction: column;
  dl {
    width: 100%;
    height: 150px;
    display: flex;
   justify-content: space-evenly;
    align-items: center;
    border-bottom: 1px solid #ccc;
    dt {
      img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
      }
    }
    dd {
     
      span {
        font-size: 18px;
        font-weight: bolder;
      }
      i{
        font-size: 20px;
        padding: 10px;
        border-radius: 50%;
        background: #efefef;
       margin: 0 10px;
       color: #F56C6C;
      }
    }
  }
 
}
</style>
